<template>
	<view class="container">
    <view v-if="isLoading" class="loading">
      <u-loading-icon mode="circle" />
    </view>
    <template v-if="!isLoading && identStatus === 'unidentified'">
        <view class="logo-content">
          <image :src="$Config.get('imageUrl')+'/index/auth_logo.png'" class="logo_bg"/>
          <view class="logo">
            <view class="top">?</view>
            <view class="bot">未认证</view>
          </view>
        </view>
        <view class="t1">请先完成您的身份认证</view>
        <view class="t2">认证成功以后可进行采购</view>
        <view class="btns">
          <button class="btn" @click="authUrl">去认证</button>
        </view>
      </template>
    <template v-if="!isLoading && identStatus === 'identified'">
        <view class="logo-content">
          <image :src="$Config.get('imageUrl')+'/index/auth_logo.png'" class="logo_bg"/>
          <view class="logo">
            <view class="top">!</view>
            <view class="bot">未签署</view>
          </view>
        </view>
        <view class="t1">待完成签署任务</view>
        <view class="t2">完成签署以后可进行采购</view>
        <view class="btns">
          <button class="btn" @click="createSignTask">去签署</button>
        </view>
      </template>
<!--    <template v-if="!isLoading && identStatus === 2">-->
<!--      <view class="logo-content">-->
<!--        <image :src="$Config.get('imageUrl')+'/order/play_result.png'" class="logo_bg"/>-->
<!--      </view>-->
<!--      <view class="t1">认证成功</view>-->
<!--      <view class="t2">完成签署以后可进行采购</view>-->
<!--      <view class="btns">-->
<!--        <button class="btn" @click="goGoods">去采购</button>-->
<!--      </view>-->
<!--    </template>-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
        // 当前用户信息
        userInfo: {},
        // 是否已登录
        isLogin: false,
        isLoading:true,
        identStatus:'unidentified', // unidentified 未认证 unidentified 已认证
        task:[]
			}
		},
		onShow() {
      this.getAuthStatus()
		},
		onHide(e) {
			console.log('index onHide')
		},
		methods: {
      getAuthStatus(){
        this.isLoading = true;
        this.$request.get('wx/fdd/signTaskList').then(r=>{
          this.identStatus = r.data.identStatus;
          if(r.data.identStatus === 'identified'){
            this.getTaskList()
          }
        })
        this.$request.get('wx/fdd/getAuthStatus').then(r=>{
          this.identStatus = r.data.identStatus;
        }).catch(err=>{
          this.$toast(err.errmsg)
        }).finally(()=>{
          this.isLoading = false;
        })
      },
      authUrl() {
        this.$request.get('wx/fdd/authUrl').then(r=>{
          const url = '/pagesFace/pages/webview/webview?url=' + encodeURIComponent(r.data.authUrl)
          uni.navigateTo({ url })
        }).catch(err=>{
          this.$toast(err.errmsg)
        })
      },
      createSignTask(){
        const params = {
          redirectUrl:"page_work/middle/middle"
        }
        this.$request.post('wx/fdd/createSignTask',params).then(r=>{
          console.log(r)
          const url = '/pagesFace/pages/webview/webview?url=' + encodeURIComponent(r.data.actorSignTaskEmbedUrl)
          uni.navigateTo({ url })
        }).catch(err=>{
          this.$toast(err.errmsg)
        })
      },
      getTaskList(){
        this.$request.post('wx/fdd/signTaskList',{}, {load:false}).then(res=>{
          this.task = res.data;
          if(this.task.length > 0){
            this.goTaskList()
          }
        })
      },
      goTaskList(){
        this.$navTo('page_work/taskList/index')
      },
      goGoods(){
        this.$navTo('page_work/goods/list')
      }
		}
	}
</script>
<style lang="less">
.container{
	min-height: 100vh;
  background: #FFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 100rpx;

  .logo-content{
    width:272rpx;
    height:262rpx;
    position: relative;
    .logo_bg{
      width: 100%;
      height: 100%;
      position: absolute;
      top:0;
      left:0;
      image{
        width: 100%;
        height: 100%;
      }
    }
    .logo{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #FFFFFF;
      position: relative;
      height: 100%;
      .top{
        margin-top: -20rpx;
        font-size: 72rpx;
        font-weight: bold;
      }
      .bot{
        font-size: 40rpx;
        font-weight: bold;
      }
    }
  }
  .t1{
    margin-top: 80rpx;
    font-size: 40rpx;
    line-height: 40rpx;
    font-weight: 400;
    color: #464646;
  }
  .t2{
    margin-top: 20rpx;
    font-size: 24rpx;
    line-height: 24rpx;
    font-weight: 400;
    color: #999999;
  }
  .btns{
    padding: 0 156rpx;
    margin-top: 56rpx;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    .btn{
      flex: 1;
      height:80rpx;
      border-radius: 36rpx;
      background: #1777FF;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFF;
      font-size: 28rpx;
      font-weight: bold;
    }
  }

}
</style>
